<script setup>
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
const dateSelect = ref([
  {
    text: '近一个月',
    value: '1'
  },
  {
    text: '近三个月',
    value: '2'
  },
])
const showPopover = ref(false)
const showPopover2 = ref(false)
</script>
<template>
  <div class="container">
    <div class="flex items-center justify-between">
      <div>
        <van-popover v-model:show="showPopover" theme="dark" :actions="dateSelect" :show-arrow="false" :offset="[30, 0]">
          <template #reference>
            <div class="flex items-center">
              <div class=" mr-10px text-[#FFFFFF99] text-[24px] font-HarmonyOS font-500 line-height-[40px]">
                近一个月
              </div>
              <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 20 20" fill="none">
                <g clip-path="url(#clip0_12_1410)">
                  <path
                    d="M16.9547 5.48942C17.1963 5.25813 17.516 5.12606 17.8503 5.1194C18.1847 5.11275 18.5093 5.23199 18.7599 5.45348C19.0105 5.67497 19.1687 5.98254 19.2031 6.31519C19.2376 6.64785 19.1457 6.98129 18.9458 7.24942L18.8161 7.39876L10.0107 15.989L1.3423 7.73476C1.09896 7.50268 0.952286 7.18723 0.931675 6.85159C0.911064 6.51595 1.01803 6.18492 1.23115 5.92482C1.44427 5.66471 1.74781 5.49473 2.08094 5.44894C2.41408 5.40315 2.75222 5.48493 3.02761 5.67788L3.18049 5.80229L9.98761 12.2841L16.9547 5.48938L16.9547 5.48942Z"
                    fill="white" fill-opacity="0.6" />
                </g>
                <defs>
                  <clipPath id="clip0_12_1410">
                    <rect width="20" height="20" fill="white" transform="translate(20) rotate(90)" />
                  </clipPath>
                </defs>
              </svg>
            </div>
          </template>
        </van-popover>
      </div>
      <van-popover v-model:show="showPopover2" theme="dark" :actions="dateSelect" :show-arrow="false" :offset="[-40, 0]">
        <template #reference>
          <div class="flex items-center">
            <div class=" mr-10px text-[#FFFFFF99] text-[24px] font-HarmonyOS font-500 line-height-[40px]">
              正序
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 20 20" fill="none">
              <path
                d="M17.586 8.29795C17.9663 8.29795 18.3092 8.06885 18.4549 7.71729C18.6006 7.36611 18.52 6.96143 18.2512 6.69229L13.9448 2.38623C13.8022 2.24365 13.5713 2.24365 13.4288 2.38623L12.6145 3.20049C12.4719 3.34307 12.4719 3.57412 12.6145 3.7165L15.3153 6.41709H1.68599C1.48696 6.41709 1.32544 6.57842 1.32544 6.77764V7.9376C1.32544 8.13662 1.48677 8.29814 1.68599 8.29814H17.586V8.29795ZM18.3135 11.6935H2.41802C2.03774 11.6935 1.69478 11.9226 1.54907 12.2741C1.40337 12.6253 1.48403 13.03 1.75278 13.2991L6.05923 17.6054C6.20181 17.7479 6.43267 17.7479 6.57524 17.6054L7.3895 16.7911C7.53208 16.6485 7.53208 16.4175 7.3895 16.2751L4.68872 13.5743H18.3135C18.5151 13.5743 18.6784 13.4108 18.6784 13.2095V12.0585C18.6784 11.8569 18.5151 11.6935 18.3135 11.6935Z"
                fill="white" fill-opacity="0.6" />
            </svg>
          </div>
        </template>
      </van-popover>
    </div>
    <div class="flex flex-col gap-30px mt-16px">
      <div class="p-30px rounded-[16px] bg-[#272727] flex" v-for="(value, index) in 10" :key="index">
        <div>
          <img src="/src/assets/icon/public/logo_full.png" class="w-60 h-60" />
        </div>
        <div class="ml-20px flex flex-col gap-12px">
          <div class="text-[30px] text-[#fff] font-HarmonyOS font-900">5566661X</div>
          <div class="text-[24px] text-[#F76938] font-HarmonyOS font-500">获得算力:1000</div>
          <div class="text-[22px] text-[#9C9C9C] font-HarmonyOS font-500">2025-10-10 10:00:00</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
}
</style>
